import { View } from '@tarojs/components';
import { useEffect, useState } from 'react';
import { AtTabs, AtTabsPane } from 'taro-ui';
import ActivityItem from '@/components/ActivityItem';
import { getMyActivity } from '@/service/apis/mine';

import './index.scss';
import EmptyContent from '@/components/EmptyContent';

/**
 * 我的活动列表
 * @returns
 */
const Activity = () => {
  const [current, setCurrent] = useState(1);
  const [originlist, setOriginList] = useState<any[]>([]);
  const [list, setList] = useState<any>(null);
  const tabList = [
    { title: '未开始', value: 0 },
    { title: '全部', value: 1 },
  ];

  const getActivityList = async () => {
    const { data } = await getMyActivity();
    console.log('my_topics', data);
    setOriginList(data.my_topics);
    setList(data.my_topics);
  };

  useEffect(() => {
    getActivityList();
  }, []);

  // 切换tab
  const onTabChange = (value: number) => {
    setCurrent(value);
    if (value === 1) {
      setList(originlist);
      return;
    }
    const _currentList = originlist.filter((item: any) => {
      return item.end === 0;
    });
    setList(_currentList);
  };

  return (
    <View className="activity-container">
      <AtTabs scroll current={current} tabList={tabList} height={'80'} onClick={onTabChange}>
        {tabList.map((tab, index) => {
          return (
            <AtTabsPane key={tab.value} current={current} index={index}>
              <View className="activity-list">
                {list?.map((item: any) => {
                  return <ActivityItem key={item.id} data={item} />;
                })}
                {list?.length === 0 && <EmptyContent />}
              </View>
            </AtTabsPane>
          );
        })}
      </AtTabs>
    </View>
  );
};
export default Activity;
